<template>
  <el-col class="bill">
    <el-col class="title">商品管理列表</el-col>

    <el-col class="tabs">
      <div
        :class="inventory === '成品' ? 'current' : ''"
        @click="handleClick('成品')"
      >
        成品
      </div>
      <div
        :class="inventory === '茶叶' ? 'current' : ''"
        @click="handleClick('茶叶')"
      >
        茶叶
      </div>
      <div
        :class="inventory === '礼盒' ? 'current' : ''"
        @click="handleClick('礼盒')"
      >
        礼盒
      </div>
    </el-col>

    <el-col class="search">
      <el-input
        placeholder="输入商品名称"
        suffix-icon="el-icon-search"
        v-model="name"
        @input="inputSearch"
      ></el-input>
    </el-col>

    <el-col class="controls">
      <div @click="editDialog">新增</div>
    </el-col>

    <el-table :data="productList" border stripe size="small">
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="商品名称" width="300">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span class="edit" @click="get_edit(scope.row)">编辑</span>
        </template>
      </el-table-column>
    </el-table>

    <el-col class="class_bottom">
      <el-pagination
        @current-change="handleCurrent"
        :page-size="15"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-col>

    <el-dialog
      title="商品管理"
      :visible.sync="editShow"
      :modal-append-to-body="false"
      width="800px"
      :show-close="false"
      center
    >
      <div class="editList">
        <div>
          <div>商品类型</div>
          <div>
            <el-radio v-model="form.class" label="成品">成品</el-radio>
            <el-radio v-model="form.class" label="茶叶">茶叶</el-radio>
            <el-radio v-model="form.class" label="礼盒">礼盒</el-radio>
          </div>
        </div>
        <div>
          <div>商品名称</div>
          <el-input v-model="form.name"></el-input>
        </div>
        <div v-if="form.class === '成品'">
          <div>茶叶重量(g)</div>
          <el-input v-model="form.weight"></el-input>
        </div>
        <div v-if="form.class === '成品'">
          <div>关联茶叶</div>
          <el-input v-model="tea">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="selectDialog('茶叶')"
            ></el-button>
          </el-input>
        </div>
        <div v-if="form.class === '成品'">
          <div>关联礼盒</div>
          <el-input v-model="box">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="selectDialog('礼盒')"
            ></el-button>
          </el-input>
        </div>
        <div class="control">
          <el-button type="primary" @click="handleEdit">确定</el-button>
          <el-button type="info" @click="cancelEdit">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="基础资料"
      :visible.sync="selectShow"
      :modal-append-to-body="false"
      :show-close="false"
      width="64%"
      center
    >
      <div class="basic_data">
        <el-table
          ref="multipleTable"
          :data="inventoryList"
          tooltip-effect="dark"
          width="64%"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="100"> </el-table-column>
          <el-table-column label="商品名称">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary" @click="handleSelect">确定</el-button>
          <el-button type="info" @click="cancelSelect">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      inventory: "成品",
      productList: [],
      total: 0,
      page: 1,
      name: "",
      editShow: false,
      selectShow: false,
      inventoryList: [],
      state: "",
      tea: "",
      box: "",
      form: {
        name: "",
        class: "",
        weight: "",
        tea_id: "",
        box_id: "",
      },
    };
  },
  mounted() {
    this.get_goodManagerList();
  },
  methods: {
    handleClick(tab) {
      this.inventory = tab;
      this.page = 1;
      this.name = "";
      this.get_goodManagerList();
    },
    handleCurrent(val) {
      this.page = val;
      this.get_goodManagerList();
    },
    inputSearch() {
      this.page = 1;
      this.get_goodManagerList();
    },
    selectionChange(val) {
      this.selectList = val;
    },
    editDialog() {
      this.editShow = true;
    },
    get_edit(item) {
      this.form = {
        id: item.id,
        name: item.name,
        class: item.class,
        weight: item.weight || "",
        tea_id: item.tea || "",
        box_id: item.box || "",
      };
      this.tea = item.tea_name || "";
      this.box = item.box_name || "";
      this.editShow = true;
    },
    cancelEdit() {
      this.editShow = false;
      this.state = "";
      this.tea = "";
      this.box = "";
      this.form = {
        name: "",
        class: "",
        weight: "",
        tea_id: "",
        box_id: "",
      };
    },
    selectDialog(state) {
      this.state = state;
      this.selectShow = true;
      this.editShow = false;
      this.get_crmClass();
    },
    handleSelect() {
      if (this.state === "茶叶") {
        this.tea = this.selectList[0].name;
        this.form.tea_id = this.selectList[0].good_id;
      } else {
        this.box = this.selectList[0].name;
        this.form.box_id = this.selectList[0].good_id;
      }
      this.cancelSelect();
    },
    cancelSelect() {
      this.editShow = true;
      this.selectShow = false;
    },
    async get_crmClass() {
      let data = {
        class: this.state,
      };
      let res = await this.$store.dispatch("crm_getCrmClass", data);
      if (!res.code) {
        this.inventoryList = res.data;
      }
    },
    async get_goodManagerList() {
      let data = {
        name: this.name,
        class: this.inventory,
        page: this.page,
      };
      let res = await this.$store.dispatch("crm_goodManagerList", data);
      if (!res.code) {
        this.total = res.data.total;
        this.productList = res.data.data;
      }
    },
    async handleEdit() {
      let data = {
        id: this.form.id || "",
        class: this.form.class,
        name: this.form.name,
        tea_id: this.form.tea_id,
        box_id: this.form.box_id,
        weight: this.form.weight,
      };
      let res = await this.$store.dispatch("crm_editGood", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.cancelEdit();
        this.page = 1;
        this.name = "";
        this.get_goodManagerList();
      }
    },
  },
};
</script>
<style lang="scss" >
.bill {
  padding: 30px;
  text-align: left;

  .tabs {
    display: flex;
    align-items: center;
    border-bottom: #999999 solid 1px;

    div {
      padding: 30px;
      color: #333333;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }

    .current {
      padding: 30px 30px 26px;
      border-bottom: #339ef9 solid 4px;
    }
  }

  .search {
    display: flex;
    align-items: center;
    padding: 20px 0;

    .el-input {
      width: 35%;
      margin-right: 30px;
    }
  }

  .edit {
    color: #409eff;
    cursor: pointer;
  }

  .controls {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    div {
      background-color: #409eff;
      background-image: none;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 14px;
      color: #ffffff;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      margin-right: 20px;
      cursor: pointer;
    }
  }

  .forewarning {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #feeff1;
    color: #f85a5a;
    font-size: 14px;
    padding: 2px 0;

    i {
      font-size: 15px;
    }

    div {
      margin-left: 5px;
    }
  }

  .editList {
    > div {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      > div:nth-of-type(1) {
        width: 100px;
      }

      .el-input {
        width: 670px;
      }
    }

    .control {
      margin-bottom: 0;
      justify-content: center;
    }
  }

  .basic_data {
    > div:nth-of-type(1) {
      margin-bottom: 20px;
    }

    > div:nth-of-type(2) {
      display: flex;
      justify-content: center;
    }
  }
}
</style>